<template>
  <view id="navbar">
    <cv-navbar>
      <view class="top-box">
        <view class="logo-box">
          <img class="logo" src="../../static/logo.png" alt="" srcset="" />
          <text class="name">泉州经贸职业技术学院</text>
        </view>
        <view class="input-search">
          <uni-icons type="search" size="20" color="#d4d6d6"></uni-icons>
          <input type="text" placeholder="搜索门店" disabled />
        </view>
      </view>
    </cv-navbar>
  </view>

  <scroll-view
    class="shop-list"
    :style="{ height: `${sys.windowHeight - navbar.height - 45}px` }"
    scroll-y="true"
    refresher-enabled="true"
    :refresher-threshold="100"
    refresher-background="#fff"
  >
    <view class="home">
      <!-- <button @click="but">{{ mid }}</button> -->
      <view class="swiper-box">
        <view style="width: 100%">
          <my-swiper></my-swiper>
        </view>

        <view class="category-box">
          <view class="category-box-item">
            <my-category></my-category>
          </view>
        </view>
      </view>

      <view class="center">
        <uni-section title="系统公告" type="line">
          <uni-notice-bar
            show-icon
            scrollable
            text="uni-app 版正式发布，开发一次，同时发布iOS、Android、H5、微信小程序、支付宝小程序、百度小程序、头条小程序等7大平台。"
          />
        </uni-section>
        <shop-list></shop-list>
      </view>
    </view>
    <view class="buttom"> 到底了 </view>
  </scroll-view>
</template>

<script lang="ts" setup>
import { ref, onMounted, getCurrentInstance } from 'vue'
import shopList from './component/shopList.vue'
import mySwiper from './component/my-swiper.vue'
import myCategory from './component/category.vue'
import statusBar from '@/components/navbar/src/statu-bar/statusBar.vue'

import { merchantService } from '@/api'
import type { Test } from '@/type/merchant/shopMenu'
import data from '@/mock/goods_callApi.json'

import tmMessage from '@/tmui/components/tm-message/tm-message.vue'
import { useResize, useSysInfo } from '@/hook'
import { onLoad } from '@dcloudio/uni-app'
const msg = ref<InstanceType<typeof tmMessage> | null>(null)

const mid = ref(9)

onLoad(() => {
  uni
    .createSelectorQuery()
    .in(getCurrentInstance())
    .select('#navbar')
    .boundingClientRect((res) => {
      console.log(res, 123)
    })
    .exec()
})

/**
 * 获取头部组件高度
 */
const navbar = useResize('#navbar', getCurrentInstance())

const sys = useSysInfo()
</script>

<style lang="scss" scoped>
#navbar {
  width: 100%;
  background: linear-gradient(to bottom, #4f62ff, #4fd0ff);
  position: relative;
  box-sizing: border-box;
  padding-bottom: 15rpx;

  .logo-box {
    position: absolute;
    left: 0;
    display: flex;
    align-items: center;

    .logo {
      width: 60rpx;
      height: 60rpx;
      background-color: #fff;
      border-radius: 50%;
      margin: 0 20rpx;
    }

    .name {
      width: 150rpx;
      display: block;
      font-size: 0.8rem;
      color: #fff;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }
  }

  .top-box {
    width: 100vw;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-top: 15rpx;

    .input-search {
      width: 275rpx;
      background-color: #fff;
      border-radius: 50rpx;
      display: flex;
      align-items: center;
      justify-content: center;
      box-sizing: border-box;
      padding: 0 10rpx;
      margin-left: 30rpx;

      > input {
        width: 250rpx;
        padding: 10rpx 0;
        font-size: 0.8rem;
        color: #d4d6d6;
      }
    }
  }
}
.home {
  width: 100vw;

  background-color: #f3f4f6;

  .center {
    padding: 0 20rpx;
    margin: 20rpx 0;
  }

  .swiper-box {
    width: 100%;
    position: relative;

    .category-box {
      width: 100%;
      height: 150rpx;
      position: relative;

      .category-box-item {
        width: 95%;
        position: absolute;
        top: -25%;
        left: 50%;
        transform: translateX(-50%);
      }
    }
  }
}

.buttom {
  width: 100%;
  height: 150rpx;
  display: flex;
  justify-content: center;
}
</style>
